<template>
  <!-- 考试动态 -->
  <div class="chart-container" :style="position">
      <div :style="chartStyle" class="chart-main">
          <h2 class="class-title">近一周考试动态</h2>
          <div class="showbox">  
              <ul class="box">
                <li v-for="(item,index) in obj" :key="index" class="class-item">
                    <img :src="item.userpic" title="">
                    <span class="item-time">{{item.time}}</span>参加了
                    <span class="">{{item.className}}</span>
                </li>
                <li v-for="(item,index) in obj" :key="index" class="class-item">
                    <img :src="item.userpic" title="">
                    <span class="item-time">{{item.time}}</span>参加了
                    <span class="">{{item.className}}</span>
                </li>
              </ul>
          </div>
      </div>
      <i class="i_tl"></i>
      <i class="i_tr"></i>
      <i class="i_bl"></i>
      <i class="i_br"></i>
  </div>
</template>

<script>
export default {
    name:'TestDynamic',
    props:{
        data:{
            type:String,
            default:'hhh'
        },
        boxPosition:{       
            type:Object,       
            default:()=>{}     
        }
    },
    setup(props){
        const position = `left:${props.boxPosition?.left}px;top:${props.boxPosition?.top}px;`
        const obj = [
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
            {userpic:'https://img2.baidu.com/it/u=142058928,1477726679&fm=26&fmt=auto&gp=0.jpg',time:'3秒前',className:'《俘获富婆的芳心》'},
        ]
        return {
            position,
            obj
        }
    }
}
</script>

<style lang="scss" scoped>
.chart-container{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;//暂时，需改为动态数据
    background-color: rgba($color: #071c55, $alpha: 0.5);
    >i{
    width: 20px;
    height: 20px;
    position: absolute;
  }
  .i_tl{
    top: 0;
    left: 0;
    background: url('../../assets/images/useimages/tl.png') no-repeat left top;
  }
  .i_tr{
    top: 0;
    right: 0;
    background: url('../../assets/images/useimages/tr.png') no-repeat right 1px;
  }
  .i_bl{
    bottom: 0;
    left: 0;
    background: url('../../assets/images/useimages/bl.png') no-repeat left bottom;
  }
  .i_br{
    bottom: 0;
    right: 0;
    background: url('../../assets/images/useimages/br.png') no-repeat right bottom;
  }
}
.chart-main{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    overflow: hidden;
}
.class-title{
    color: #6db4f3;
    font-size: 18px;
    font-weight: 700;
    margin-top: 0px;
}
.showbox{
    height: 80%;
    overflow: hidden;
    border-top: solid 1px #15295d;
  }
.box{
    margin: 0;
    padding: 0;
    animation: exammoveup 10s linear infinite;
    .class-item{
        height: 34px;
        list-style: none;
        padding: 6px 0;
        box-sizing: border-box;
        border-bottom: solid 1px #15295d;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #7d90b1;
        font-size: 12px;
        img{
            width: 17px;
            border-radius: 10px;
            overflow: hidden;
            vertical-align: middle;
        }
    }
  &:hover{
      animation-play-state: paused;
  }
}
.item-time{
    padding-left: 2px;
    color: #68acea;
}
</style>